import Link from 'next/link';
import { Metadata } from 'next';
import { BookOpen, Target, Lightbulb, Trophy, Brain } from 'lucide-react';

export const metadata: Metadata = {
  title: 'Sudoku Tutorials & Tips 2025 | Learn Sudoku Strategies',
  description: 'Master Sudoku with our comprehensive tutorials. Learn beginner to advanced strategies, tips, and techniques to solve puzzles faster in 2025.',
  keywords: 'sudoku tips 2025, sudoku strategies, how to play sudoku, sudoku tutorial, sudoku techniques, sudoku for beginners',
};

const tutorials = [
  {
    slug: 'beginners-guide',
    title: 'Beginner\'s Guide to Sudoku',
    description: 'Learn the basics of Sudoku and start solving puzzles today',
    icon: BookOpen,
    color: 'blue'
  },
  {
    slug: 'advanced-strategies',
    title: 'Advanced Sudoku Strategies',
    description: 'Master complex techniques like X-Wing and Swordfish',
    icon: Target,
    color: 'green'
  },
  {
    slug: 'common-mistakes',
    title: 'Common Mistakes to Avoid',
    description: 'Learn what errors beginners make and how to avoid them',
    icon: Lightbulb,
    color: 'yellow'
  },
  {
    slug: 'speed-solving',
    title: 'Speed Solving Techniques',
    description: 'Tips to solve Sudoku puzzles faster and more efficiently',
    icon: Trophy,
    color: 'red'
  },
  {
    slug: 'mental-strategies',
    title: 'Mental Strategies for Success',
    description: 'Develop the right mindset and cognitive approach',
    icon: Brain,
    color: 'purple'
  }
];

const colorClasses = {
  blue: 'from-blue-50 to-blue-100 border-blue-200 hover:border-blue-400',
  green: 'from-green-50 to-green-100 border-green-200 hover:border-green-400',
  yellow: 'from-yellow-50 to-yellow-100 border-yellow-200 hover:border-yellow-400',
  red: 'from-red-50 to-red-100 border-red-200 hover:border-red-400',
  purple: 'from-purple-50 to-purple-100 border-purple-200 hover:border-purple-400'
};

const iconColorClasses = {
  blue: 'text-blue-600',
  green: 'text-green-600',
  yellow: 'text-yellow-600',
  red: 'text-red-600',
  purple: 'text-purple-600'
};

export default function TutorialsPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 py-12 px-4">
      <div className="max-w-5xl mx-auto">
        <h1 className="text-5xl font-bold text-center mb-6 text-gray-900">
          Sudoku Tutorials & Strategies
        </h1>
        <p className="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">
          Learn everything from basic rules to advanced techniques. Master Sudoku with our comprehensive guides updated for 2025.
        </p>

        <div className="grid md:grid-cols-2 gap-6 mb-12">
          {tutorials.map((tutorial) => {
            const Icon = tutorial.icon;
            return (
              <Link
                key={tutorial.slug}
                href={`/tutorials/${tutorial.slug}`}
                className={`bg-gradient-to-br ${colorClasses[tutorial.color as keyof typeof colorClasses]} border-2 rounded-lg p-6 transition-all hover:shadow-lg`}
              >
                <div className="flex items-start gap-4">
                  <div className={`p-3 bg-white rounded-lg ${iconColorClasses[tutorial.color as keyof typeof iconColorClasses]}`}>
                    <Icon size={32} />
                  </div>
                  <div>
                    <h3 className="text-xl font-bold text-gray-900 mb-2">
                      {tutorial.title}
                    </h3>
                    <p className="text-gray-700">{tutorial.description}</p>
                  </div>
                </div>
              </Link>
            );
          })}
        </div>

        <div className="bg-white rounded-lg shadow-md p-8">
          <h2 className="text-3xl font-bold mb-6 text-gray-900">Why Learn Sudoku?</h2>
          <div className="space-y-4 text-gray-700">
            <p>
              Sudoku is more than just a puzzle—it's a mental workout that sharpens your logic, concentration, and problem-solving skills. Whether you're new to Sudoku or looking to improve your speed, our tutorials will guide you step-by-step.
            </p>
            <p>
              Our 2025 guide covers everything from understanding the basic rules to mastering advanced techniques used by competitive players. Each tutorial includes practical examples, visual demonstrations, and tips you can apply immediately.
            </p>
            <p>
              Start with the beginner's guide if you're new, or jump straight to advanced strategies if you're ready for a challenge. Practice makes perfect, so be sure to try our puzzles after each lesson.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
